import { globalStyle, style } from '@vanilla-extract/css';
import SVGArrowDown from '../../../svg/chevron-down.svg';
import { knnoTable } from '../../../theme/table.css';
import { vars } from '../../../theme/vars.css';

export const selectInputStyle = style({
	position: 'relative',
	selectors: {
		'&:not(.read-only):after': {
			content: '',
			position: 'absolute',
			right: '0px',
			top: '0px',
			bottom: '0px',
			width: '3em',
			background: vars.color.secondaryText,
			maskImage: `url('data:image/svg+xml;charset=utf8,${SVGArrowDown}')`,
			maskPosition: 'center',
			maskRepeat: 'no-repeat',
			maskSize: '1.6em',
		},
	},
});

globalStyle(`${knnoTable} :is(th, td).${selectInputStyle}:not(.read-only)`, {
	paddingRight: '2em',
});
